@page "/products"
@page "/products/{Page:int}"
@using ModernArchitectureShop.ShopUI.Models
@using AutoMapper

<h6 class="validation-message">@_errorMessage</h6>

<div class="clearfix">
  <div class="float-right">
    <input type="text" value="" @onchange="@Search" class="form-control" placeholder="search..." />
  </div>
</div>

@{
  System.Diagnostics.Debug.Assert(_productsModel != null, nameof(_productsModel) + " != null");
}
@if (_productsModel.TotalOfProducts == 0)
{
  <div class="text-center">
    <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
}
else
{
  <div class="card-columns">
    @foreach (var product in _productsModel.Products)
    {
      <div class="card" style="margin: 10px; padding: 10px">
        <div class="card-img" style="background-image: url('/images/ProductImagesOriginal/@product.ImageUrl');">
        </div>
        <div class="card-body">
          <h5 class="card-title">@product.Name</h5>
        </div>
        <div class="card-footer">
          <div>Category: @product.Code - Location: Germany</div>
          <div>Price: <span class="font-weight-bold" style="color: green;">$@product.Price.ToString("0.##")</span></div>
          <div>
            <label>
              Quantity:
            </label>
            <input type="number" min="1" max="99" value=@product.Quantity class="form-control"  style="width: 60px;"/>
          </div>

          <div>
            <p align="center">
             <button class="addbutton" @onclick="@(async () => { var config = new MapperConfiguration( cfg =>
                                              {
                                                cfg.CreateMap<ProductModel, ItemModel>() .ForMember( x => x.ItemId, map => map.MapFrom(o => o.ProductId) );
                                              });
                                                 var mapper = new Mapper(config);
                                                 var itemModel = mapper.Map<ItemModel>(product);
                                                 itemModel.Username = _username;
                                                 itemModel.StoreId = Guid.Empty;
                                                 await AddProductToBasketAsync(itemModel); })">
               <img src="images/shopping-cart.png">
            </button>
            </p>
          </div>
        </div>
      </div>
    }
  </div>

  <div class="d-flex justify-content-center">
    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item">
          <a class="page-link" href="/products/1" aria-label="First">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        @for (var i = 1; i <= Math.Ceiling((double)_productsModel.TotalOfProducts / PageSize); i++)
        {
          <li class="page-item">
            <a class="page-link" href="/products/@i">@i</a>
          </li>
        }
        <li class="page-item">
          <a class="page-link" href="/products/@Math.Ceiling((double) _productsModel.TotalOfProducts / PageSize)" aria-label="Last">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
}
